```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECMAScript 完全指南 | 现代前端开发</title>
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            line-height: 1.8;
            color: #333;
            background-color: #f8fafc;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .code-block {
            background-color: #282c34;
            color: #abb2bf;
            border-radius: 6px;
            padding: 1.5rem;
            font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
            overflow-x: auto;
        }
        .code-keyword { color: #c678dd; }
        .code-string { color: #98c379; }
        .code-number { color: #d19a66; }
        .code-comment { color: #5c6370; font-style: italic; }
        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .section-divider {
            border: none;
            height: 1px;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4">
        <div class="max-w-4xl mx-auto text-center">
            <h1 class="text-5xl font-bold mb-6 tracking-tight">ECMAScript 完全指南</h1>
            <p class="text-xl mb-10 max-w-2xl mx-auto leading-relaxed">
                探索JavaScript的核心标准，掌握现代前端开发的基石技术
            </p>
            <div class="flex justify-center space-x-4">
                <a href="#what-is" class="px-6 py-3 bg-white text-indigo-700 font-medium rounded-full hover:bg-indigo-50 transition duration-300">
                    <i class="fas fa-book mr-2"></i>开始学习
                </a>
                <a href="#es6-features" class="px-6 py-3 bg-indigo-800 text-white font-medium rounded-full hover:bg-indigo-700 transition duration-300">
                    <i class="fas fa-bolt mr-2"></i>ES6特性
                </a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="max-w-5xl mx-auto px-4 py-12">
        <!-- What is ECMAScript Section -->
        <section id="what-is" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 text-indigo-700 p-3 rounded-full mr-4">
                    <i class="fas fa-question-circle text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">什么是ECMAScript</h2>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-8">
                    <p class="text-lg text-gray-700 mb-6">
                        <span class="font-bold text-indigo-600">ECMAScript</span>是一种由
                        <a href="https://baike.baidu.com/item/Ecma国际" class="text-indigo-600 hover:underline">Ecma国际</a>
                        （前身为欧洲计算机制造商协会）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为
                        <a href="https://baike.baidu.com/item/JavaScript" class="text-indigo-600 hover:underline">JavaScript</a>
                        或
                        <a href="https://baike.baidu.com/item/JScript" class="text-indigo-600 hover:underline">JScript</a>
                        ，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。
                    </p>
                    <div class="mt-6 p-4 bg-indigo-50 rounded-lg border border-indigo-100">
                        <h3 class="font-bold text-indigo-700 mb-2 flex items-center">
                            <i class="fas fa-lightbulb mr-2"></i>关键概念
                        </h3>
                        <p class="text-gray-700">
                            ECMAScript是JavaScript的语言规范，JavaScript是ECMAScript的一种实现。其他实现还包括JScript(ActionScript等。
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Relationship Section -->
        <section id="relationship" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 text-indigo-700 p-3 rounded-full mr-4">
                    <i class="fas fa-project-diagram text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">ECMAScript 和 JavaScript 的关系</h2>
            </div>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-8">
                        <p class="text-gray-700 mb-6">
                            要讲清楚这个问题，需要回顾历史。1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。
                        </p>
                        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
                            <p class="text-yellow-700">
                                <i class="fas fa-info-circle mr-2"></i>该标准从一开始就是针对JavaScript语言制定的，但之所以不叫JavaScript有两个原因：
                            </p>
                            <ul class="list-disc pl-5 mt-2 text-gray-700">
                                <li class="mb-1">Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字</li>
                                <li>想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性</li>
                            </ul>
                        </div>
                        <p class="font-bold text-gray-800">
                            因此，ECMAScript是浏览器的规范(标准), JavaScript是一种实现
                        </p>
                    </div>
                </div>
                <div>
                    <div class="bg-white rounded-xl shadow-md overflow-hidden h-full">
                        <div class="p-6">
                            <div class="mermaid">
                                graph LR
                                A[ECMAScript标准] --> B(JavaScript)
                                A --> C(JScript)
                                A --> D(ActionScript)
                                B --> E[浏览器实现]
                                C --> E
                                D --> F[Flash环境]
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ES6 Intro Section -->
        <section id="es6-intro" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 text-indigo-700 p-3 rounded-full mr-4">
                    <i class="fas fa-star text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">ECMAScript 6 简介</h2>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-8">
                    <p class="text-lg text-gray-700 mb-6">
                        <span class="font-bold text-indigo-600">ECMAScript 6.0</span>（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
                    </p>
                    <div class="my-6">
                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651285285247-17601046-9a23-4626-b7c6-1d1f1d123cf3.png" alt="ES6特性" class="rounded-lg shadow-md w-full">
                    </div>
                    <p class="text-gray-700">
                        每一次版本的发布都有新的语法特性，ES6是JavaScript发展史上最重要的更新之一，引入了许多现代编程语言特性，使JavaScript变得更加强大和易于使用。
                    </p>
                </div>
            </div>
        </section>

        <!-- Development Tools Section -->
        <section id="dev-tools" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 text-indigo-700 p-3 rounded-full mr-4">
                    <i class="fas fa-tools text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">开发工具与环境</h2>
            </div>
            <div class="grid md:grid-cols-2 gap-8">
                <!-- VSCode Card -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-3">
                                <i class="fab fa-microsoft text-2xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">Visual Studio Code</h3>
                        </div>
                        <p class="text-gray-700 mb-4">
                            VS Code是微软开发的轻量级但功能强大的源代码编辑器，内置了对JavaScript和TypeScript的出色支持，是前端开发的首选工具。
                        </p>
                        <div class="mb-4">
                            <a href="https://code.visualstudio.com/" class="text-blue-600 hover:underline font-medium flex items-center">
                                <i class="fas fa-download mr-2"></i>下载地址
                            </a>
                        </div>
                        <div class="border-t pt-4">
                            <h4 class="font-semibold text-gray-800 mb-2">推荐插件</h4>
                            <ul class="space-y-2">
                                <li class="flex items-center">
                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                    <span>Live Server - 实现热部署</span>
                                </li>
                                <li class="flex items-center">
                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                    <span>ESLint - JavaScript代码检查</span>
                                </li>
                                <li class="flex items-center">
                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                    <span>Prettier - 代码格式化</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Shortcuts Card -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-100 text-purple-600 p-2 rounded-lg mr-3">
                                <i class="fas fa-keyboard text-2xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">VS Code快捷键</h3>
                        </div>
                        <div class="space-y-4">
                            <div>
                                <p class="font-medium text-gray-800">格式化代码:</p>
                                <div class="bg-gray-100 p-2 rounded-md inline-block mt-1">
                                    <span class="font-mono bg-gray-200 px-2 py-1 rounded">Shift + Alt + F</span>
                                </div>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800">快速生成HTML模板:</p>
                                <div class="bg-gray-100 p-2 rounded-md inline-block mt-1">
                                    <span class="font-mono bg-gray-200 px-2 py-1 rounded">! + Tab</span>
                                </div>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800">快速生成ES6模块:</p>
                                <div class="bg-gray-100 p-2 rounded-md inline-block mt-1">
                                    <span class="font-mono bg-gray-200 px-2 py-1 rounded">!m + Tab</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <hr class="section-divider my-12">

        <!-- ES6 Features Section -->
        <section id="es6-features" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 text-indigo-700 p-3 rounded-full mr-4">
                    <i class="fas fa-bolt text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">ES6 新特性</h2>
            </div>

            <!-- Let Keyword -->
            <div class="mb-12">
                <h3 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-code text-indigo-500 mr-3"></i>let 关键字
                </h3>
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <p class="text-gray-700 mb-4">
                            ES6引入了<code class="bg-gray-100 px-2 py-1 rounded">let</code>关键字来声明变量，解决了<code class="bg-gray-100 px-2 py-1 rounded">var</code>关键字的一些问题，如变量提升和块级作用域。
                        </p>
                        <div class="code-block mb-4">
                            <pre><code class="language-javascript"><span class="code-keyword">// 定义变量</span>
<span class="code-keyword">let</span> a = <span class="code-number">1</span>;
<span class="code-keyword">let</span> b = <span class="code-number">2</span>;
<span class="code-keyword">let</span> c = <span class="code-number">3</span>;
console.log(a,b,c);

<span class="code-comment">// ES6中也可以这样定义</span>
<span class="code-keyword">let</span> [d, e, f] = [<span class="code-number">11</span>, <span class="code-number">12</span>, <span class="code-number">13</span>];
console.log(d,e,f);

<span class="code-comment">// let定义的变量不能重复定义</span>
<span class="code-keyword">var</span> a = <span class="code-number">1</span>;
<span class="code-keyword">var</span> a = <span class="code-number">2</span>; <span class="code-comment">// 允许</span>
<span class="code-keyword">let</span> b = <span class="code-number">11</span>;
<span class="code-keyword">let</span> b = <span class="code-number">12</span>; <span class="code-comment">// 报错，Identifier 'b' has already been declared</span></code></pre>
                        </div>
                        <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
                            <h4 class="font-bold text-blue-800 mb-2 flex items-center">
                                <i class="fas fa-exclamation-circle mr-2"></i>var与let的区别
                            </h4>
                            <ol class="list-decimal pl-5 space-y-1 text-gray-700">
                                <li>var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问</li>
                                <li>let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Const Keyword -->
            <div class="mb-12">
                <h3 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-lock text-indigo-500 mr-3"></i>const 关键字
                </h3>
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <p class="text-gray-700 mb-4">
                            <code class="bg-gray-100 px-2 py-1 rounded">const</code>用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
                        </p>
                        <div class="code-block mb-4">
                            <pre><code class="language-javascript"><span class="code-keyword">const</span> a = <span class="code-number">10</span>;
<span class="code-comment">// a = 100; // const定义的变量不能被修改</span>
console.info(a);

<span class="code-keyword">const</span> param = <span class="code-keyword">new</span> Object();
param.name = <span class="code-string">"admin"</span>;
param.age = <span class="code-number">22</span>;
console.info(param);

<span class="code-comment">// 修改对象属性</span>
param.name = <span class="code-string">"zs"</span>; <span class="code-comment">// 可以修改</span>
console.info(param);

<span class="code-comment">// param = new Object(); // 不能修改</span>
console.info(param);</code></pre>
                        </div>
                        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                            <p class="text-gray-700">
                                <i class="fas fa-info-circle text-yellow-600 mr-2"></i>
                                因为对象是引用类型的，param中保存的仅是对象的指针，这意味着const仅保证指针不发生改变，修改对象的属性不会改变对象的指针，所以是被允许的。
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Arrow Functions -->
            <div class="mb-12">
                <h3 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-arrow-right text-indigo-500 mr-3"></i>箭头函数
                </h3>
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <p class="text-gray-700 mb-4">
                            箭头函数是ES6中引入的一种更简洁的函数写法，类似于其他语言中的lambda表达式。它简化了函数的书写，使用<code class="bg-gray-100 px-2 py-1 rounded">=></code>操作符定义。
                        </p>
                        <div class="code-block mb-4">
                            <pre><code class="language-javascript"><span class="code-comment">// 基本箭头函数</span>
<span class="code-keyword">var</span> sum = (x, y) => x + y;
console.log(sum(<span class="code-number">10</span>, <span class="code-number">20</span>));

<span class="code-comment">// 多行箭头函数</span>
<span class="code-keyword">var</span> sum2 = (a, b) => {
    console.log(a)
    console.log(b)
    <span class="code-keyword">return</span> a + b;
}
console.log(sum2(<span class="code-number">4</span>, <span class="code-number">5</span>));

<span class="code-comment">// 对象中的箭头函数</span>
<span class="code-keyword">let</span> user3 = {
    name: <span class="code-string">"admin"</span>,
    age: <span class="code-number">20</span>,
    go: <span class="code-keyword">function</span> (param) { <span class="code-comment">// 传统写法</span>
        console.info(param)
    },
    go1: param => console.info(param+<span class="code-string">", age:"</span>+user3.age), <span class="code-comment">// 箭头函数</span>
    go2 (param) { <span class="code-comment">// 方法简写</span>
        console.info(param+<span class="code-string">",age:"</span>+<span class="code-keyword">this</span>.age);
    }
}</code></pre>
                        </div>
                        <div class="grid md:grid-cols-2 gap-4 mt-4">
                            <div class="bg-green-50 border-l-4 border-green-400 p-4">
                                <h4 class="font-bold text-green-800 mb-2">箭头函数的特点</h4>
                                <ul class="list-disc pl-5 space-y-1 text-gray-700">
                                    <li>更简洁的语法</li>
                                    <li>没有自己的this</li>
                                    <li>不能用作构造函数</li>
                                    <li>没有arguments对象</li>
                                </ul>
                            </div>
                            <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
                                <h4 class="font-bold text-blue-800 mb-2">使用场景</h4>
                                <ul class="list-disc pl-5 space-y-1 text-gray-700">
                                    <li>回调函数</li>
                                    <li>数组方法(map, filter等)</li>
                                    <li>需要保持this上下文的场景</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Object Shorthand -->
            <div class="mb-12">
                <h3 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-object-group text-indigo-500 mr-3"></i>对象简写
                </h3>
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <p class="text-gray-700 mb-4">
                            ES6提供了更简洁的对象字面量语法，当属性名和变量名相同时可以省略重复的部分。
                        </p>
                        <div class="code-block mb-4">
                            <pre><code class="language-javascript"><span class="code-keyword">let</span> age = <span class="code-number">23</span>
<span class="code-keyword">let</span> name = <span class="code-string">"达哥"</span>

<span class="code-comment">// 传统写法</span>
<span class="code-keyword">let</span> user1 = { age: age, name: name }

<span class="code-comment">// ES6简写</span>
<span class="code-keyword">let</span> user2 = { age, name }

console.info(user1)
console.info(user2)</code></pre>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modules -->
            <div class="mb-12">
                <h3 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-puzzle-piece text-indigo-500 mr-3"></i>模块化
                </h3>
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <p class="text-gray-700 mb-4">
                            ES6引入了官方的模块系统，使用<code class="bg-gray-100 px-2 py-1 rounded">export</code>和<code class="bg-gray-100 px-2 py-1 rounded">import</code>语法来导入导出模块。
                        </p>
                        
                        <div class="grid md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <h4 class="font-bold text-gray-800 mb-3 flex items-center">
                                    <i class="fas fa-sign-out-alt text-blue-500 mr-2"></i>导出模块 (export)
                                </h4>
                                <div class="code-block">
                                    <pre><code class="language-javascript"><span class="code-comment">// a.js</span>
<span class="code-keyword">let</span> a = <span class="code-number">10</span>;
<span class="code-keyword">let</span> user = {
    name: <span class="code-string">"达哥"</span>,
    age: <span class="code-number">20</span>
}
<span class="code-comment">// 导出多个变量</span>
<span class="code-keyword">export</span> {a, user}

<span class="code-comment">// 默认导出</span>
<span class="code-keyword">export</span> <span class="code-keyword">default</span> <span class="code-keyword">function</span>() {
    <span class="code-keyword">return</span> <span class="code-string">"默认导出"</span>
}</code></pre>
                                </div>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-3 flex items-center">
                                    <i class="fas fa-sign-in-alt text-blue-500 mr-2"></i>导入模块 (import)
                                </h4>
                                <div class="code-block">
                                    <pre><code class="language-javascript"><span class="code-comment">// main.js</span>
<span class="code-comment">// 导入具名导出</span>
<span class="code-keyword">import</span> {a, user} <span class="code-keyword">from</span> <span class="code-string">'./a.js'</span>
<span class="code-comment">// 导入默认导出</span>
<span class="code-keyword">import</span> myFunc <span class="code-keyword">from</span> <span class="code-string">'./a.js'</span>
<span class="code-comment">// 导入所有导出</span>
<span class="code-keyword">import</span> * <span class="code-keyword">as</span> utils <span class="code-keyword">from</span> <span class="code-string">'./utils.js'</span></code></pre>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-purple-50 border-l-4 border-purple-400 p-4">
                            <h4 class="font-bold text-purple-800 mb-2 flex items-center">
                                <i class="fas fa-lightbulb mr-2"></i>模块化的优势
                            </h4>
                            <ul class="list-disc pl-5 space-y-1 text-gray-700">
                                <li>避免全局变量污染</li>
                                <li>代码组织更加清晰</li>
                                <li>更好的依赖管理</li>
                                <li>支持按需加载</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Vue Section -->
        <section id="vue-intro" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 text-indigo-700 p-3 rounded-full mr-4">
                    <i class="fab fa-vuejs text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">Vue.js 简介</h2>
            </div>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
                <div class="p-8">
                    <p class="text-lg text-gray-700 mb-6">
                        Vue 是一套用于构建用户界面的渐进式 JavaScript 框架，发布于2014年2月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。
                    </p>
                    
                    <div class="grid md:grid-cols-2 gap-8 mt-8">
                        <div>
                            <h3 class="text-2xl font-bold text-gray-800 mb-4">MVVM 模式</h3>
                            <div class="mermaid">
                                graph LR
                                A[Model] -->|数据绑定| B[ViewModel]
                                B -->|DOM监听| C[View]
                                C -->|用户操作| B
                                B -->|数据更新| A
                            </div>
                        </div>
                        <div>
                            <h3 class="text-2xl font-bold text-gray-800 mb-4">核心概念</h3>
                            <ul class="space-y-4">
                                <li class="flex items-start">
                                    <div class="bg-green-100 text-green-600 p-2 rounded-full mr-3">
                                        <i class="fas fa-cube"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-gray-800">组件化</h4>
                                        <p class="text-gray-700">将UI拆分为独立可复用的组件</p>
                                    </div>
                                </li>
                                <li class="flex items-start">
                                    <div class="bg-blue-100 text-blue-600 p-2 rounded-full mr-3">
                                        <i class="fas fa-sync-alt"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-gray-800">响应式</h4>
                                        <p class="text-gray-700">数据变更自动更新视图</p>
                                    </div>
                                </li>
                                <li class="flex items-start">
                                    <div class="bg-purple-100 text-purple-600 p-2 rounded-full mr-3">
                                        <i class="fas fa-project-diagram"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-gray-800">虚拟DOM</h4>
                                        <p class="text-gray-700">高效渲染，优化性能</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Vue Setup -->
            <div class="mb-12">
                <h3 class="text-2xl font-bold text-gray-800 mb-4">Vue 环境搭建</h3>
                <div class="grid md:grid-cols-3 gap-6">
                    <!-- Step 1 -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300">
                        <div class="p-6">
                            <div class="bg-blue-100 text-blue-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
                                <span class="font-bold">1</span>
                            </div>
                            <h4 class="font-bold text-gray-800 mb-2">引入Vue.js</h4>
                            <div class="code-block text-sm">
                                <pre><code class="language-html">&lt;script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"&gt;&lt;/script&gt;</code></pre>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 2 -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300">
                        <div class="p-6">
                            <div class="bg-blue-100 text-blue-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
                                <span class="font-bold">2</span>
                            </div>
                            <h4 class="font-bold text-gray-800 mb-2">创建挂载元素</h4>
                            <div class="code-block text-sm">
                                <pre><code class="language-html">&lt;div id="app"&gt;
  {{ message }}
&lt;/div&gt;</code></pre>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 3 -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300">
                        <div class="p-6">
                            <div class="bg-blue-100 text-blue-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
                                <span class="font-bold">3</span>
                            </div>
                            <h4 class="font-bold text-gray-800 mb-2">创建Vue实例</h4>
                            <div class="code-block text-sm">
                                <pre><code class="language-javascript">new Vue({
  el: "#app",
  data: {
    message: 'Hello Vue!'
  }
});</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Vue Features -->
            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <!-- Interpolation -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-gray-800 mb-4">插值表达式</h3>
                        <p class="text-gray-700 mb-4">
                            插值表达式<code class="bg-gray-100 px-1 py-0.5 rounded">{{ }}</code>用于在模板中显示数据。
                        </p>
                        <div class="code-block mb-4">
                            <pre><code class="language-html">&lt;div id="app"&gt;
  message:{{ message }}&lt;br&gt;
  array:{{ array[0] }}&lt;br&gt;
  obj:{{ obj.email }}&lt;br&gt;
  {{10+10}}&lt;br&gt;
  {{flag?'男':'女'}}
&lt;/div&gt;</code></pre>
                        </div>
                    </div>
                </div>
                
                <!-- Directives -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-gray-800 mb-4">常用指令</h3>
                        <div class="space-y-4">
                            <div>
                                <h4 class="font-semibold text-gray-800">条件渲染</h4>
                                <div class="code-block text-sm mt-2">
                                    <pre><code class="language-html">&lt;p v-if="flag"&gt;显示内容&lt;/p&gt;
&lt;p v-else-if="rich"&gt;其他内容&lt;/p&gt;
&lt;p v-else&gt;默认内容&lt;/p&gt;

&lt;p v-show="flag"&gt;根据条件显示/隐藏&lt;/p&gt;</code></pre>
                                </div>
                            </div>
                            <div>
                                <h4 class="font-semibold text-gray-800">循环渲染</h4>
                                <div class="code-block text-sm mt-2">
                                    <pre><code class="language-html">&lt;li v-for="item in items"&gt;{{item}}&lt;/li&gt;
&lt;li v-for="(item, index) in items"&gt;{{index}}:{{item}}&lt;/li&gt;</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Vue Component -->
            <div class="mb-12">
                <h3 class="text-2xl font-bold text-gray-800 mb-4">组件化开发</h3>
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-8">
                        <p class="text-gray-700 mb-6">
                            Vue的组件化设计思想借鉴了面向对象思想。在实际项目中，Vue的对象都会以组件的形式出现，能被反复使用。组件分为全局注册和局部注册两种方式。
                        </p>
                        
                        <div class="grid md:grid-cols-2 gap-8">
                            <!-- Global Component -->
                            <div>
                                <h4 class="font-bold text-gray-800 mb-3 flex items-center">
                                    <i class="fas fa-globe text-blue-500 mr-2"></i>全局组件
                                </h4>
                                <div class="code-block">
                                    <pre><code class="language-javascript"><span class="code-comment">// 全局注册，可在任何Vue实例中使用</span>
Vue.component(<span class="code-string">"my-component"</span>, {
  template: <span class="code-string">"&lt;div&gt;&lt;h1&gt;{{title}}&lt;/h1&gt;&lt;/div&gt;"</span>,
  data() {
    <span class="code-keyword">return</span> {
      title: <span class="code-string">"全局组件"</span>
    }
  }
});</code></pre>
                                </div>
                            </div>
                            
                            <!-- Local Component -->
                            <div>
                                <h4 class="font-bold text-gray-800 mb-3 flex items-center">
                                    <i class="fas fa-map-marker-alt text-blue-500 mr-2"></i>局部组件
                                </h4>
                                <div class="code-block">
                                    <pre><code class="language-javascript"><span class="code-comment">// 只能在当前Vue实例中使用</span>
<span class="code-keyword">new</span> Vue({
  el: <span class="code-string">'#app'</span>,
  components: {
    <span class="code-string">'my-component'</span>: {
      template: <span class="code-string">"&lt;div&gt;局部组件&lt;/div&gt;"</span>
    }
  }
});</code></pre>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <h4 class="font-bold text-gray-800 mb-3">组件生命周期</h4>
                            <div class="mermaid">
                                graph TB
                                A[beforeCreate] --> B[created]
                                B --> C[beforeMount]
                                C --> D[mounted]
                                D -->|数据更新| E[beforeUpdate]
                                E --> F[updated]
                                D -->|销毁| G[beforeDestroy]
                                G --> H[destroyed]
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Node.js & Vue CLI Section -->
        <section id="node-vuecli" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 text-indigo-700 p-3 rounded-full mr-4">
                    <i class="fab fa-node-js text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">Node.js 与 Vue CLI</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <!-- Node.js -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-green-100 text-green-600 p-2 rounded-lg mr-3">
                                <i class="fab fa-node text-2xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">Node.js</h3>
                        </div>
                        <p class="text-gray-700 mb-4">
                            Node.js 是一个开源与跨平台的 JavaScript 运行时环境，可以理解为是运行前端程序的服务器。
                        </p>
                        <div class="mb-4">
                            <a href="http://nodejs.cn/" class="text-blue-600 hover:underline font-medium flex items-center">
                                <i class="fas fa-link mr-2"></i>官方网站
                            </a>
                        </div>
                        <div class="bg-gray-100 p-4 rounded-lg">
                            <h4 class="font-semibold text-gray-800 mb-2">安装验证</h4>
                            <div class="code-block text-sm">
                                <pre><code class="language-bash">node -v
npm -v</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Vue CLI -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-3">
                                <i class="fab fa-vuejs text-2xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">Vue CLI</h3>
                        </div>
                        <p class="text-gray-700 mb-4">
                            Vue CLI 是 Vue 的脚手架工具，用于快速生成 Vue 项目模板，内置了 Webpack、Babel 等工具链。
                        </p>
                        <div class="space-y-4">
                            <div>
                                <h4 class="font-semibold text-gray-800">安装</h4>
                                <div class="code-block text-sm mt-2">
                                    <pre><code class="language-bash">npm install -g @vue/cli
<span class="code-comment"># 或使用cnpm</span>
cnpm install -g @vue/cli</code></pre>
                                </div>
                            </div>
                            <div>
                                <h4 class="font-semibold text-gray-800">创建项目</h4>
                                <div class="code-block text-sm mt-2">
                                    <pre><code class="language-bash">vue create my-project
cd my-project
npm run serve</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Project Structure -->
            <div class="mb-12">
                <h3 class="text-2xl font-bold text-gray-800 mb-4">Vue 项目结构</h3>
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <div class="code-block">
                            <pre><code class="language-bash">my-project
├── node_modules/   <span class="code-comment"># 项目依赖</span>
├── public/         <span class="code-comment"># 静态资源</span>
│   ├── index.html  <span class="code-comment"># 入口HTML</span>
├── src/            <span class="code-comment"># 源代码</span>
│   ├── assets/     <span class="code-comment"># 静态资源</span>
│   ├── components/ <span class="code-comment"># 组件</span>
│   ├── App.vue     <span class="code-comment"># 根组件</span>
│   └── main.js     <span class="code-comment"># 入口JS</span>
├── package.json    <span class="code-comment"># 项目配置</span>
└── README.md       <span class="code-comment"># 项目说明</span></code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Vue Ecosystem Section -->
        <section id="vue-ecosystem" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 text-indigo-700 p-3 rounded-full mr-4">
                    <i class="fas fa-cubes text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">Vue 生态系统</h2>
            </div>
            
            <div class="grid md:grid-cols-3 gap-6">
                <!-- Vue Router -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300">
                    <div class="p-6">
                        <div class="bg-blue-100 text-blue-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
                            <i class="fas fa-route"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">Vue Router</h3>
                        <p class="text-gray-700 mb-4">
                            Vue.js 官方的路由管理器，用于构建单页面应用。
                        </p>
                        <div class="code-block text-sm mb-4">
                            <pre><code class="language-bash">npm install vue-router</code></pre>
                        </div>
                        <div class="code-block text-sm">
                            <pre><code class="language-javascript"><span class="code-comment">// 路由配置示例</span>
<span class="code-keyword">const</span> routes = [
  { path: <span class="code-string">'/'</span>, component: Home },
  { path: <span class="code-string">'/about'</span>, component: About }
]</code></pre>
                        </div>
                    </div>
                </div>
                
                <!-- Vuex -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300">
                    <div class="p-6">
                        <div class="bg-purple-100 text-purple-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
                            <i class="fas fa-database"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">Vuex</h3>
                        <p class="text-gray-700 mb-4">
                            专为 Vue.js 应用程序开发的状态管理模式。
                        </p>
                        <div class="code-block text-sm mb-4">
                            <pre><code class="language-bash">npm install vuex</code></pre>
                        </div>
                        <div class="code-block text-sm">
                            <pre><code class="language-javascript"><span class="code-comment">// Store 示例</span>
<span class="code-keyword">const</span> store = <span class="code-keyword">new</span> Vuex.Store({
  state: { count: <span class="code-number">0</span> },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})</code></pre>
                        </div>
                    </div>
                </div>
                
                <!-- Element UI -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300">
                    <div class="p-6">
                        <div class="bg-green-100 text-green-600 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
                            <i class="fas fa-paint-brush"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">Element UI</h3>
                        <p class="text-gray-700 mb-4">
                            基于 Vue 的桌面端组件库，提供丰富的 UI 组件。
                        </p>
                        <div class="code-block text-sm mb-4">
                            <pre><code class="language-bash">npm install element-ui</code></pre>
                        </div>
                        <div class="code-block text-sm">
                            <pre><code class="language-javascript"><span class="code-comment">// 引入Element</span>
<span class="code-keyword">import</span> ElementUI <span class="code-keyword">from</span> <span class="code-string">'element-ui'</span>;
<span class="code-keyword">import</span> <span class="code-string">'element-ui/lib/theme-chalk/index.css'</span>;

Vue.use(ElementUI);</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```